<template>
    <div class="service-instance-wrapper">
      <div class="fr clearfix mb15">
        <bk-form form-type="inline">
          <bk-form-item label="业务">
            <bk-select
              v-model="biz_id"
              style="width: 200px"
              @change="handleBizChange"
              searchable>
              <bk-option
                v-for="item in biz_list"
                :key="item.bk_biz_id"
                :id="item.bk_biz_id"
                :name="item.bk_biz_name"></bk-option>
            </bk-select>
          </bk-form-item>
          <bk-form-item label="模块">
            <bk-select
              v-model="module_id"
              style="width: 200px"
              :disabled="!module_list.length"
              @change="handleModuleChange"
              searchable>
              <bk-option
                v-for="item in module_list"
                :key="item.bk_module_id"
                :id="item.bk_module_id"
                :name="item.bk_module_name"></bk-option>
            </bk-select>
          </bk-form-item>
          <bk-form-item label="名称搜索">
            <bk-input
              v-model="search_key"
              placeholder="服务实例名称"
              style="width: 180px;" />
          </bk-form-item>
          <bk-form-item>
            <bk-button theme="primary" title="查询" @click="searchInstances">查询</bk-button>
          </bk-form-item>
        </bk-form>
      </div>
  
      <bk-table
        style="margin-top: 15px;"
        :data="instance_list"
        :size="size"
        :pagination="pagination"
        @page-change="handlePageChange">
        <bk-table-column label="实例ID" prop="id" />
        <bk-table-column label="实例名称" prop="name" />
        <bk-table-column label="模块ID" prop="bk_module_id" />
        <bk-table-column label="创建人" prop="creator" />
        <bk-table-column label="操作" width="120">
          <template slot-scope="props">
            <bk-button theme="primary" text @click="showDetail(props.row)">详情</bk-button>
          </template>
        </bk-table-column>
      </bk-table>
  
      <bk-sideslider
        :is-show.sync="isSidesliderShow"
        :title="'服务实例详情'"
        :show-mask="false"
        :width="600"
        direction="right">
        <template slot="content">
          <div class="step-detail-container" v-if="detail">
            <div class="step-detail-item"><strong>ID：</strong>{{ detail.id }}</div>
            <div class="step-detail-item"><strong>名称：</strong>{{ detail.name }}</div>
            <div class="step-detail-item"><strong>模块ID：</strong>{{ detail.bk_module_id }}</div>
            <div class="step-detail-item"><strong>创建人：</strong>{{ detail.creator }}</div>
            <div class="step-detail-item"><strong>描述：</strong>{{ detail.description || '无' }}</div>
          </div>
        </template>
      </bk-sideslider>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        size: 'small',
        biz_list: [],
        biz_id: null,
        module_list: [],
        module_id: null,
        search_key: '',
        instance_list: [],
        detail: null,
        isSidesliderShow: false,
        pagination: {
          current: 1,
          count: 0,
          limit: 10,
        },
      };
    },
    created() {
      this.getBizData();
    },
    methods: {
      async getBizData() {
        try {
          const res = await this.$store.dispatch('example/getBizData', {});
          this.biz_list = res.data.info || [];
        } catch (e) {
          this.biz_list = [];
        }
      },
      async getModuleData() {
        if (!this.biz_id) {
          this.module_list = [];
          return;
        }
        try {
          const res = await this.$store.dispatch('example/getModuleData', { bk_biz_id: this.biz_id });
          this.module_list = res.data.info || [];
        } catch (e) {
          this.module_list = [];
        }
      },
      async searchInstances(page = 1) {
        if (!this.biz_id) {
          this.$bkMessage({ theme: 'warning', message: '请选择业务' });
          return;
        }
        const params = {
          bk_biz_id: this.biz_id,
          page,
          page_size: this.pagination.limit,
        };
        if (this.module_id) params.bk_module_id = this.module_id;
        if (this.search_key) params.search_key = this.search_key;
        try {
          const res = await this.$store.dispatch('example/getServiceInstances', params);
          if (res.result) {
            this.instance_list = res.data.info || res.data.results || [];
            this.pagination.count = res.data.count || (res.data.info ? res.data.info.length : 0);
            this.pagination.current = page;
          } else {
            this.instance_list = [];
            this.pagination.count = 0;
          }
        } catch (e) {
          this.instance_list = [];
          this.pagination.count = 0;
        }
      },
      handleBizChange(newValue) {
        this.biz_id = newValue;
        this.module_id = null;
        this.getModuleData();
        this.searchInstances(1);
      },
      handleModuleChange() {
        this.searchInstances(1);
      },
      handlePageChange(page) {
        this.searchInstances(page);
      },
      showDetail(row) {
        this.detail = row;
        this.isSidesliderShow = true;
      },
    },
  };
  </script>
  
  <style scoped>
  .service-instance-wrapper {
    padding: 24px;
  }
  .step-detail-container {
    padding: 20px;
  }
  .step-detail-item {
    margin-bottom: 12px;
  }
  </style>